<!-- 头部 -->
<template>
  <div class="leftTopBox">
    <div class="flex leftTopBox-top" v-if="dataVal.leftTopVal1">
      <div class="leftTopBox-left flex-column">
        <div class="boxline u-m-t-20">
          <h2 class="titleText u-m-b-20">整体概况</h2>
        
          <ul class="flex align-center" >
            <li>
              <p class="title">全校人数</p>
              <p>{{dataVal.leftTopVal1.total_count||0}}</p>
            </li>
            <li>
              <p class="title">学生总人数</p>
              <p>{{dataVal.leftTopVal1.student_count||0}}</p>
            </li>
            <li>
              <p class="title">老师人数</p>
              <p>{{dataVal.leftTopVal1.teacher_count||0}}</p>
            </li>
            <li>
              <p class="title">班级数量</p>
              <p>{{dataVal.leftTopVal1.class_count||0}}</p>
            </li>
          </ul>
        </div>
        <div class="boxline u-m-t-10 flex-1" style="overflow: hidden;">
          <h2 class="titleText u-m-b-10">今日出勤率</h2>
          <div class="region-echarts" v-if="pageflag">
            <Echart
              :options="regionOptions"
              id="regionChart"
              class="region-echarts_center"
            ></Echart>
          </div>
        </div>
      </div>
      <div class="leftTopBox-right">
        <slot name="right"></slot>
      </div>
    </div>
    <div class=" leftTopBox-bottom u-p-t-20">
      <slot name="bottom"></slot>
    </div>
  </div>
</template>

<script>
import Echart from '@/components/echart/index.vue'
export default {
  name: "leftTopBox",
  components: {
    Echart
  },
  props:{
    dataVal:{
      type: Object,
      default:()=>{
        // eslint-disable-next-line vue/require-valid-default-prop
        return {
          leftTopVal1:{},
          leftTopVal2:{}
        }
      }
    }
  },
  data() {
    return {
      pageflag: false,
      regionOptions: {}, // 区域分布
    };
  },
  watch:{
    'dataVal.leftTopVal2':{
      handler(val){
        if(val&&val.length>0){
          this.getData(val)
        }
        console.log(val,'=========val')
      },
      deep:true,
      immediate:true
      
    }
  },
  

  mounted() {
     
    // this.getData();
  },
  methods: {
    getData(data) {
      this.pageflag = true;
      if (data.length > 0) {
        const newData = [];
        data.forEach(iv=>{
          const obj = {
            name: iv.name,
            value: iv.count,
            rate:iv.rate
          };
          newData.push(obj);
        })
        this.init(newData);
      }
    },
    init(newData) {
      // 区域分布
      this.regionOptions = {
        legend: {
          orient: 'vertical',
          left: 'right',
          textStyle:{
            color:'#ccc',
            fontSize:'10'
          }
        },
        color: ["#5087EC", "#68BBC4", "#58A55C", "#F2BD42"],
        grid: {
          containLabel: true,
          bottom: 0,
          right: 0,
          top: 'top',
          left: 0
        },
        tooltip: {
          trigger: "item",
          color:'#CEDBDE'
        },
        series: [
          {
            // name: 'Access From',
            type: "pie",
            radius: "64%",
            right:'80',
            avoidLabelOverlap:true,
            data: newData,
            emphasis: {
              itemStyle: {
                borderWidth:'0',
                shadowBlur: 20,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.8)",
              },
            },
            label:{
              color:'#CEDBDE',
              fontSize:'14',
              formatter: function (params) {
                // console.log(params,'=========params')
                  if(params.name !== '') {
                        return  params.name + '\n'  +params.data.rate;
                    }else {
                        return '';
                  }
                }
            },
            
          },
        ],
      };
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.leftTopBox {
  width: 100%;
  height: 100%;
  &-top{
    width: 100%;
    height: 60%;
  }
  &-left{
    width: 45%;
    height: 100%;
    color: #fff;
    ul{
      justify-content: space-between;
      li{
        list-style: none;
      }
    }
    p{
      font-size: 20px;
      font-weight: bold;
    }
    p.title{
      font-size: 14px;
      margin-bottom: 10px;
      font-weight: normal;
      color: #94C2EA;
    }
    .region-echarts {
      width: 100%;
      height: 100% !important;

      .region-echarts_center {
        width: 100%;
        height: 100%;
      }
    }
  }
  &-right{
    width: 55%;
    height: 100%;
    padding-left: 10px;
  }
  &-bottom{
    height: 40%;
  }
}
</style>
